<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>库存管理</title>
    <link rel="stylesheet" href="/element-ui/index.css">
    <link rel="stylesheet" href="/element-ui/fonts/element-icons.css">
    <script src="/element-ui/vue.js"></script>
    <script src="/element-ui/index.js"></script>
    <script src="/element-ui/axios.min.js"></script>
    <style>
        body {
            font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '\\5FAE\\8F6F\\96C5\\9ED1', Arial, sans-serif;
            background-color: #f5f6fa;
        }
        #app {
            padding: 20px;
            background-color: #f5f6fa;
        }
        .page-title {
            font-size: 26px;
            font-weight: bold;
            color: #333;
            background: #fff;
            padding: 24px 20px 12px 20px;
            border-bottom: 1px solid #eee;
            margin-bottom: 20px;
            letter-spacing: 2px;
            text-align: center;
            animation: fadeInDown 0.8s ease-out;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            border-radius: 8px;
        }
        @keyframes fadeInDown {
            from { opacity: 0; transform: translateY(-20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .el-main {
            padding: 20px;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }
        .el-form-item {
            margin-bottom: 20px;
        }
        .el-input__inner {
            transition: all 0.3s ease;
        }
        .el-input__inner:focus,
        .el-input__inner:hover {
            border-color: #409EFF;
            box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
        }
        .el-button {
            transition: all 0.3s ease;
        }
        .el-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 10px rgba(64, 158, 255, 0.2);
        }
        .el-button--primary:hover {
            box-shadow: 0 4px 10px rgba(64, 158, 255, 0.2);
        }
        .el-button--success:hover {
            box-shadow: 0 4px 10px rgba(103, 194, 58, 0.2);
        }

        .el-table {
            animation: fadeIn 1s ease-out;
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        .el-table__row {
            transition: all 0.3s ease;
        }
        .el-table__row:hover {
            background-color: #f5f7fa !important;
            transform: scale(1.005);
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }
        .pagination-container {
            margin-top: 20px;
            text-align: right;
            padding: 10px 0;
            background: #fff;
            border-top: 1px solid #eee;
            border-radius: 0 0 8px 8px;
        }
        .el-pagination button,
        .el-pagination .btn-prev,
        .el-pagination .btn-next,
        .el-pagination .el-pager li {
            transition: all 0.3s ease;
        }
        .el-pagination button:hover,
        .el-pagination .btn-prev:hover,
        .el-pagination .btn-next:hover,
        .el-pagination .el-pager li:hover {
            color: #409EFF;
            transform: translateY(-1px);
        }
        .action-btn-group {
            display: flex;
            gap: 8px;
            flex-wrap: nowrap;
            align-items: center;
        }
        .action-btn-group .el-button {
            font-size: 13px;
            min-width: 56px;
            padding: 7px 12px;
        }
        .inventory-status-tag {
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            color: #fff;
            display: inline-block;
            margin-left: 5px;
        }
        .status-normal {
            background-color: #67C23A; /* El-success */
        }
        .status-low {
            background-color: #E6A23C; /* El-warning */
        }
        .status-out {
            background-color: #F56C6C; /* El-danger */
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="page-title">库存管理</div>
        <el-container>
            <el-main>
                <!-- 搜索表单 -->
                <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                    <el-form-item label="教材名称">
                        <el-input v-model="searchForm.bookName" placeholder="请输入教材名称"></el-input>
                    </el-form-item>
                    <el-form-item label="ISBN">
                        <el-input v-model="searchForm.isbn" placeholder="请输入ISBN"></el-input>
                    </el-form-item>
                    <el-form-item label="作者">
                        <el-input v-model="searchForm.author" placeholder="请输入作者"></el-input>
                    </el-form-item>
                    <el-form-item label="出版社">
                        <el-select v-model="searchForm.publisherId" placeholder="选择出版社" clearable>
                            <el-option label="所有出版社" value=""></el-option>
                            <el-option v-for="publisher in publishers" :key="publisher.id" :label="publisher.name" :value="publisher.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="search">搜索</el-button>
                        <el-button @click="resetSearch">重置</el-button>
                    </el-form-item>
                </el-form>

                <!-- 数据表格 -->
                <el-table :data="inventoryList" border style="width: 100%" v-loading="loading">
                    <el-table-column prop="book.isbn" label="ISBN" width="150"></el-table-column>
                    <el-table-column prop="book.name" label="教材名称" min-width="200"></el-table-column>
                    <el-table-column prop="book.author" label="作者" width="120"></el-table-column>
                    <el-table-column prop="book.publisher.name" label="出版社" width="150"></el-table-column>
                    <el-table-column label="库存数量" width="180">
                        <template slot-scope="scope">
                            <el-input-number v-model="scope.row.quantity" :min="0" size="small" @change="() => updateQuantity(scope.row)"></el-input-number>
                        </template>
                    </el-table-column>
                    <el-table-column label="库存状态" width="120">
                        <template slot-scope="scope">
                            <span :class="['inventory-status-tag', getInventoryStatusClass(scope.row.quantity)]">
                                (( getInventoryStatusText(scope.row.quantity) ))
                            </span>
                        </template>
                    </el-table-column>
                </el-table>

                <!-- 分页 -->
                <div class="pagination-container">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[10, 20, 30, 50]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                    </el-pagination>
                </div>
            </el-main>
        </el-container>
    </div>

    <script>
        new Vue({
            el: '#app',
            delimiters: ['((', '))'],
            data() {
                return {
                    searchForm: {
                        bookName: '',
                        isbn: '',
                        author: '',
                        publisherId: ''
                    },
                    inventoryList: [],
                    publishers: [],
                    currentPage: 1,
                    pageSize: 10,
                    total: 0,
                    loading: false
                }
            },
            computed: {
                totalPages() {
                    return Math.ceil(this.total / this.pageSize);
                }
            },
            created() {
                this.loadData();
                this.loadPublishers();
            },
            methods: {
                loadData() {
                    this.loading = true;
                    const params = {
                        pageNum: this.currentPage,
                        pageSize: this.pageSize,
                        ...this.searchForm
                    };
                    axios.get('/inventory/api/list', { params })
                        .then(response => {
                            this.inventoryList = response.data.list;
                            this.total = response.data.total;
                        })
                        .catch(error => {
                            console.error('加载数据失败:', error);
                            this.$message.error('加载数据失败');
                        })
                        .finally(() => {
                            this.loading = false;
                        });
                },
                loadPublishers() {
                    axios.get('/publisher/api/list')
                        .then(response => {
                            this.publishers = response.data.list;
                        })
                        .catch(error => {
                            console.error('加载出版社列表失败:', error);
                            this.$message.error('加载出版社列表失败');
                        });
                },
                search() {
                    this.currentPage = 1;
                    this.loadData();
                },
                resetSearch() {
                    this.searchForm = {
                        bookName: '',
                        isbn: '',
                        author: '',
                        publisherId: ''
                    };
                    this.currentPage = 1;
                    this.loadData();
                },
                handleSizeChange(val) {
                    this.pageSize = val;
                    this.loadData();
                },
                handleCurrentChange(val) {
                    this.currentPage = val;
                    this.loadData();
                },
                updateQuantity(item) {
                    axios.post('/inventory/api/update', {
                        id: item.id,
                        quantity: item.quantity
                    })
                    .then(response => {
                        if (response.data) {
                            this.$message.success('更新成功');
                        } else {
                            this.$message.error('更新失败');
                            this.loadData(); // 重新加载数据
                        }
                    })
                    .catch(error => {
                        console.error('更新失败:', error);
                        this.$message.error('更新失败');
                        this.loadData(); // 重新加载数据
                    });
                },
                getInventoryStatusClass(quantity) {
                    if (quantity <= 0) return 'status-out';
                    if (quantity < 10) return 'status-low';
                    return 'status-normal';
                },
                getInventoryStatusText(quantity) {
                    if (quantity <= 0) return '缺货';
                    if (quantity < 10) return '库存不足';
                    return '库存正常';
                }
            }
        });
    </script>
</body>
</html> 